<!--
 * @Description: 跑马灯效果
 * @Author: Sun
 * @Date: 2019-07-28 16:56:21
 * @LastEditors: Sun
 * @LastEditTime: 2019-08-10 13:50:51
 -->


<template>
  <div>
  
    <div v-if="ismov">
      <input type="button" value="浪起来" @click="lang">
      <input type="button" value="低调" @click="stop">
      <h4>{{mag}}</h4>
      <!-- 绑定css -->
      <incss></incss>
      <!-- 绑定style-->
      <insty></insty>
      <!-- filters过滤属性 -->
      <inmove></inmove>
    </div>
    <!--动画组件-->


  </div>
</template>

<script>
  import incss from './incss'
  import insty from './insty'
  import inmove from './inmove'


  export default {
    name: "paoma",
    data() {
      return {
        mag: '猥琐发育，别浪～～',
        inta: null,
        ismov:false
      }
    },
    created() {

    },
    methods: {
      lang() {
        clearInterval(this.inta)
        this.inta = setInterval(() => {
          var start = this.mag.substring(0, 1)
          var end = this.mag.substring(1)
          this.mag = end + start
          console.log("oooo")
        }, 400)
      },
      stop() {
        clearInterval(this.inta)
        // this.inta=null
      }
    },
    computed: {

    },
    watch: {

    },
    components: {
      incss,
      insty,
      inmove
    }

  }
</script>

<style lang="scss" scoped>
  h4 {
    color: #fff
  }
</style>